<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 在线协作白板与笔记系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .login-container {
            width: 100%;
            max-width: 400px;
            padding: 40px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }

        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .login-header i {
            font-size: 48px;
            color: #667eea;
            margin-bottom: 10px;
        }

        .login-header h3 {
            color: #333;
            font-weight: bold;
        }

        .nav-tabs {
            border-bottom: 2px solid #e9ecef;
            margin-bottom: 20px;
        }

        .nav-tabs .nav-link {
            color: #6c757d;
            border: none;
            padding: 10px 20px;
        }

        .nav-tabs .nav-link.active {
            color: #667eea;
            border-bottom: 2px solid #667eea;
        }

        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #5568d3 0%, #653a8b 100%);
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <i class="fas fa-layer-group"></i>
            <h3>在线协作白板系统</h3>
        </div>

        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#login-tab">登录</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#register-tab">注册</button>
            </li>
        </ul>

        <div class="tab-content">
            <!-- 登录表单 -->
            <div class="tab-pane fade show active" id="login-tab">
                <form id="loginForm" onsubmit="return false;">
                    <div class="mb-3">
                        <label class="form-label">用户名</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                            <input type="text" class="form-control" id="loginUsername" placeholder="请输入用户名" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">密码</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-lock"></i></span>
                            <input type="password" class="form-control" id="loginPassword" placeholder="请输入密码" required>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary w-100" onclick="handleLogin()">
                        <i class="fas fa-sign-in-alt"></i> 登录
                    </button>
                </form>
            </div>

            <!-- 注册表单 -->
            <div class="tab-pane fade" id="register-tab">
                <form id="registerForm" onsubmit="return false;">
                    <div class="mb-3">
                        <label class="form-label">用户名</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                            <input type="text" class="form-control" id="regUsername" placeholder="请输入用户名" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">昵称</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-user-tag"></i></span>
                            <input type="text" class="form-control" id="regNickname" placeholder="请输入昵称" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">邮箱</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                            <input type="email" class="form-control" id="regEmail" placeholder="请输入邮箱">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">密码</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-lock"></i></span>
                            <input type="password" class="form-control" id="regPassword" placeholder="请输入密码" required>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary w-100" onclick="handleRegister()">
                        <i class="fas fa-user-plus"></i> 注册
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        const API_BASE_URL = '/api';
        axios.defaults.baseURL = API_BASE_URL;

        async function handleLogin() {
            const username = document.getElementById('loginUsername').value.trim();
            const password = document.getElementById('loginPassword').value;

            if (!username || !password) {
                alert('请输入用户名和密码');
                return;
            }

            try {
                const response = await axios.post('/auth/login', { username, password });
                const res = response.data;
                
                console.log('登录响应:', res);
                
                if (res.code === 200 && res.data) {
                    localStorage.clear();
                    localStorage.setItem('token', res.data.token);
                    localStorage.setItem('user', JSON.stringify(res.data.user));
                    console.log('Token已保存:', res.data.token);
                    console.log('User已保存:', res.data.user);
                    alert('登录成功');
                    window.location.href = '/dashboard';
                } else {
                    alert(res.message || '登录失败');
                }
            } catch (error) {
                console.error('登录错误:', error);
                alert(error.response?.data?.message || '登录失败，请检查用户名和密码');
            }
        }

        async function handleRegister() {
            const username = document.getElementById('regUsername').value.trim();
            const nickname = document.getElementById('regNickname').value.trim();
            const email = document.getElementById('regEmail').value.trim();
            const password = document.getElementById('regPassword').value;

            if (!username || !nickname || !password) {
                alert('请填写完整信息');
                return;
            }

            try {
                const response = await axios.post('/auth/register', {
                    username, nickname, email, password
                });
                const res = response.data;
                
                console.log('注册响应:', res);
                
                if (res.code === 200 && res.data) {
                    localStorage.clear();
                    localStorage.setItem('token', res.data.token);
                    localStorage.setItem('user', JSON.stringify(res.data.user));
                    console.log('Token已保存:', res.data.token);
                    console.log('User已保存:', res.data.user);
                    alert('注册成功');
                    window.location.href = '/dashboard';
                } else {
                    alert(res.message || '注册失败');
                }
            } catch (error) {
                console.error('注册错误:', error);
                alert(error.response?.data?.message || '注册失败');
            }
        }

        document.getElementById('loginPassword').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                handleLogin();
            }
        });

        document.getElementById('regPassword').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                handleRegister();
            }
        });

        const token = localStorage.getItem('token');
        if (token && token !== 'undefined' && token !== 'null') {
            window.location.href = '/dashboard';
        } else {
            localStorage.clear();
        }
    </script>
</body>
</html>

